/*
 * @Author: liu wang wang
 * @Date: 2020-07-09 20:41:25
 * @LastEditTime: 2020-07-16 21:24:05
 * @LastEditors: liu wang wang
 * @Description: 编辑弹窗类
 * @FilePath: \st-sdk-js\src\components\Edit.ts
 */
import Common from '../utils/Common';
import form from './Form';
import { getFormData, setFormData } from '../utils/formdata';
import api from '../api';
import { editInterface } from '../../types';
import oMsg from '../utils/Msg';
import store from '../utils/store';
class Edit extends Common {
    protected theme: string = '#fff';
    protected versionID?: number = 0;
    protected zoneID?: number = 0;
    constructor() {
        super();
    }
    // 表单
    protected getForm(): HTMLElement {
        return form.getForm();
    }
    // 按钮
    protected getBtns(success?: Function): HTMLElement {
        const btnsBox = this.getDivofFlex();
        const sureBtn: HTMLElement = this.getButton({
            width: 80,
            height: 30,
            text: '完成并提交',
            background: this.theme,
            color: '#fff',
            clickHandle: () => {
                const formData = getFormData('edit-form');
                formData.id = this.versionID;
                api.modify({
                    data:formData,
                    success: (res:any)=>{
                        if(res.code === 200){
                            oMsg.msg('修改成功');
                            success && success();
                            this.close();
                        }else{
                            oMsg.msg(res.message);
                        }
                    }
                })
            }
        });
        const cancleBtn: HTMLElement = this.getButton({
            width: 80,
            height: 30,
            text: '取消',
            clickHandle: () => {
                this.close();
                store.getStore('close') && store.getStore('close')();
            }
        });
        this.setStyle(btnsBox, 'float:right;overflow:hidden;');
        this.setStyle(cancleBtn, 'border:1px solid rgba(203,203,203,1);margin-left:20px;');
        btnsBox.appendChild(sureBtn);
        btnsBox.appendChild(cancleBtn);
        return btnsBox;
    }
    // 初始化
    public init({ theme, zoneID, versionID, success}: editInterface): HTMLElement {
        this.theme = theme;
        this.versionID = versionID;
        this.zoneID = zoneID;
        api.getDetail({
            params: {
                versionID: versionID,
                zoneID:zoneID
            },
            success: (res: any) => {
                if(res.code === 200){
                    this.versionID = res.data.id;
                    setFormData('edit-form', res.data);
                }else{
                    oMsg.msg(res.message);
                }
            }
        })
        const editContent = this.createDiv();
        this.setStyle(editContent, 'overflow:hidden;');
        // 标题
        const title = this.createP();
        title.innerText = '请修改版本信息';
        this.setStyle(title, 'margin-bottom:14px;font-size:14px;');
        // 表单
        const form: HTMLElement = this.getForm();
        form.id = 'edit-form';
        // 提示
        const tip = this.createP();
        tip.innerText = '完善、准确的信息有利于增强版本曝光';
        this.setStyle(tip, 'color:#E02020;font-size:12px;margin-top:10px;');

        editContent.appendChild(title);
        editContent.appendChild(form);
        editContent.appendChild(tip);
        editContent.appendChild(this.getBtns(success));
        return editContent;
    }
}

export default Edit;